<!DOCTYPE html>
<html>
<head>
    <title>Optical Path Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: white;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="500" height="350"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Function to draw an arrowhead
        function drawArrowhead(ctx, fromX, fromY, toX, toY, size) {
            const angle = Math.atan2(toY - fromY, toX - fromX);
            ctx.save();
            ctx.translate(toX, toY);
            ctx.rotate(angle);
            ctx.beginPath();
            ctx.moveTo(0, 0);
            ctx.lineTo(-size, -size / 2);
            ctx.moveTo(0, 0);
            ctx.lineTo(-size, size / 2);
            ctx.stroke();
            ctx.restore();
        }

        // --- Main Drawing ---

        ctx.strokeStyle = 'black';
        ctx.lineWidth = 2;

        // 1. Draw the glass slab
        ctx.strokeRect(20, 180, 460, 140);

        // 2. Define and draw the parallel light rays (red and violet)
        // Red Ray
        const redRayStart = { x: 50, y: 120 };
        const redRayEnd = { x: 170, y: 180 };
        ctx.beginPath();
        ctx.moveTo(redRayStart.x, redRayStart.y);
        ctx.lineTo(redRayEnd.x, redRayEnd.y);
        ctx.stroke();

        // Violet Ray (parallel to red ray)
        const violetRayStart = { x: 250, y: 120 };
        const violetRayEnd = { x: 370, y: 180 };
        ctx.beginPath();
        ctx.moveTo(violetRayStart.x, violetRayStart.y);
        ctx.lineTo(violetRayEnd.x, violetRayEnd.y);
        ctx.stroke();

        // 3. Add text labels
        ctx.fillStyle = 'black';
        ctx.font = '24px KaiTi'; // A common Chinese font
        ctx.fillText('红光', 100, 110);
        ctx.fillText('紫光', 300, 110);

        // 4. Draw the distance 'd' marker
        // Define points for a line that is visually perpendicular to the rays
        const d_line_start = { x: 210, y: 150 };
        const d_line_end = { x: 230, y: 110 };
        
        // Draw the main line for 'd'
        ctx.beginPath();
        ctx.moveTo(d_line_start.x, d_line_start.y);
        ctx.lineTo(d_line_end.x, d_line_end.y);
        ctx.stroke();

        // Draw arrowheads at both ends
        drawArrowhead(ctx, d_line_start.x, d_line_start.y, d_line_end.x, d_line_end.y, 10);
        drawArrowhead(ctx, d_line_end.x, d_line_end.y, d_line_start.x, d_line_start.y, 10);

        // Add the 'd' label
        ctx.font = 'italic 22px Times New Roman';
        ctx.fillText('d', 225, 140);

    </script>
</body>
</html>